<script setup>
import { reactive, defineProps, watchEffect, defineEmits } from 'vue'
const props = defineProps({
  Form: {
    type: Object,
    default: () => {}
  },
  TableBox: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['change'])
/**
 * 信息展示枚举
 */

const lookList = ref([
  { lable: '原料编码', model: 'materialCode' },
  { lable: '原料名称', model: 'materialName' },
  { lable: '原料规格', model: 'materialSpec' },
  { lable: '原料类别', model: 'materialTypeName' },
  { lable: '原料产地', model: 'materialPlace' },
  { lable: '保质期（天）', model: 'materialQuality' },
  { lable: '过期提醒（天）', model: 'materialOverdue' },
  { lable: '复检日期', model: 'materialInspection' },
  { lable: '复检提醒（天）', model: 'materialReminder' },
  { lable: '最小库存提醒（天）', model: 'materialMinSecurity' },
  { lable: '供应商', model: 'materialSuppliers' }
])
const ruleForm = reactive({
  materialName: '', //原料名称
  materialSpec: '', //原料规格
  materialTypeName: '', //原料类别
  materialPlace: '', //原料产地
  materialQuality: '', //保质期
  materialOverdue: '', //过期提醒
  materialInspection: '', //复检日期
  materialReminder: '', //复检提醒
  materialMinSecurity: '', //最小库存提醒
  materialUnit: '', //单位
  materialHair: '', //超发
  materialClosed: '', //超收
  materialSuppliers: '', //供应商id
  alarmCode: {
    minSafety: [],
    shelfLife: [],
    theRe: []
  } //
})

const Drawer = ref(false)

watchEffect(() => {
  !Drawer.value ? emit('change') : ''
})

const DrawerFn = () => {
  for (let key in props.Form) {
    ruleForm[key] = props.Form[key]
  }
  // console.log(ruleForm.alarmCode)
  Drawer.value = true
}
defineExpose({ DrawerFn })
</script>

<template>
  <el-drawer size="50%" v-model="Drawer" title="信息展示">
    <el-form :inline="true" label-width="120px">
      <template v-for="(item, index) in lookList" :key="index">
        <el-form-item :label="`${item.lable}:`" v-if="ruleForm[item.model]">
          <div class="value">{{ ruleForm[item.model] }}</div>
        </el-form-item>
      </template>
    </el-form>
    <el-form>
      <!-- <el-form-item label="备注:">
        <div>{{ Form.remark }}</div>
      </el-form-item> -->
    </el-form>
    <!-- 表格 最小安全库存告警-->
    <div class="title">最小安全库存告警</div>
    <el-table stripe border :data="ruleForm.alarmCode.minSafety">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="告警方式" prop="alarmWayDict" width="auto" />
      <el-table-column label="告警频率" prop="alarmFrequency" width="180" />
      <el-table-column label="告警单位" prop="alarmUnitDict" width="160" />
      <el-table-column label="关结方式" prop="alarmNexusDict" width="160" />
    </el-table>
    <!-- 表格 保质期告警-->
    <div class="title">保质期告警</div>
    <el-table stripe border :data="ruleForm.alarmCode.minSafety">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="告警方式" prop="alarmWayDict" width="auto" />
      <el-table-column label="告警频率" prop="alarmFrequency" width="180" />
      <el-table-column label="告警单位" prop="alarmUnitDict" width="160" />
      <el-table-column label="关结方式" prop="alarmNexusDict" width="160" />
    </el-table>
    <!-- 表格 复检日期告警-->
    <div class="title">复检日期告警</div>
    <el-table stripe border :data="ruleForm.alarmCode.theRe">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="告警方式" prop="alarmWayDict" width="auto" />
      <el-table-column label="告警频率" prop="alarmFrequency" width="180" />
      <el-table-column label="告警单位" prop="alarmUnitDict" width="160" />
      <el-table-column label="关结方式" prop="alarmNexusDict" width="160" />
    </el-table>
  </el-drawer>
</template>
<style scoped>
.value {
  border-bottom: 1px solid #000;
  width: 120px;
}
.title {
  display: inline;
  width: auto;
  border-bottom: 4px solid #409eff;
  margin: 15px 0;
  padding: 10px;
}
</style>
